<template>
	<view class="box">
		<Title name="社团信息"></Title>

		<view class="info">
			<image src="../../static/img/renzheng.png" mode=""></image>
			<text class="name">大学生志愿社</text><br>
			<text class="member">
				<image src="../../static/img/renyuan.png" mode=""></image>
				成员人数：10
			</text>
		</view>

		<view class="other">
			<view class="bar">
				<view class="item">
					<text class="active">社团活动</text>
				</view>
				<view class="item">
					<text>社团动态</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Title from "../components/title.vue"
	export default {
		components: {
			Title
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		background-color: #fff;

		.info {
			background: rgba(229, 229, 234, 0.26);
			overflow: hidden;
			text-align: center;
			padding: 30rpx 0;

			&>image {
				display: block;
				width: 172rpx;
				height: 172rpx;
				border-radius: 50%;
				margin: 0 auto 30rpx;
			}

			font-size: 25rpx;

			.name {
				font-weight: bold;
			}

			.member {
				display: block;
				padding-top: 20rpx;

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		.other {
			.bar {
				display: flex;

				.item {
					flex: 1;
					font-size: 30rpx;
					color: #A8A8A8;
					text-align: center;
				}

				.active {
					color: $yellow;
					position: relative;

					&:after {
						content: "";
						display: block;
						width: 100%;
						height: 3px;
						left: 0;
						background-color: $yellow;
						position: absolute;
						bottom: -20rpx;
					}
				}
			}
		}
	}
</style>
